import React, { Component } from 'react';
import { Text, View, TextInput } from 'react-native';
import _ from 'lodash';
import StatusIcon from "../../statusIcon";
import styles from '../styles';
import { parseErrors } from '../../index'
import { debounce } from '../../../../utils';

let timer = null
export default class TextInpuCom extends Component {
  constructor(props) {
    super();
    this.state = {
      initialValue: props.initialValue
    };
  }
  componentWillReceiveProps(next) {
    if ((next.value !== this.props.value) && _.isFunction(this.props.afterChange)) {
      this.props.afterChange(next.value);
    }
  }
  onChange = value => {
    // debounce(() => this.props.onChange(value), null, 800)
    this.props.onChange(value);
  };

  render() {
    return (
      <View style={styles.wrap}>
        <View style={styles.textAreaValue}>
          <TextInput
            onChangeText={this.onChange}
            defaultValue={this.state.initialValue}
            placeholder={this.props.placeholder}
            keyboardType={this.props.keyboardType || 'default'}
            underlineColorAndroid="transparent"
            placeholderTextColor="#ccc"
            style={styles.textArea}
            multiline
            numberOfLines={4}
          />
        </View>
        {this.props.error ?
          <StatusIcon type="error" msg={parseErrors(this.props.error)} /> :
          null}
      </View>
    );
  }
}
